{extend name="public/base" /}
{block name="title"}菜单管理{/block}
{block name="main"}
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form"  action="" method="post">
        <div class="layui-inline">
            <label class="layui-form-label">选择平台：</label>
            <div class="layui-input-inline">
                <select name="plat">
                    {volist name="platlist" id="vo" key="k"}
                    <option value="{$key}" {$plat==$key ? 'selected':''}>{$vo}</option>
                    {/volist}
                </select>
            </div>
        </div>
        <div class="layui-inline">            
            <a class="layui-btn search_btn" lay-submit lay-filter="reload" >搜索</a>
        </div>
        <div class="layui-inline">
            <a href="javascript:;" class="layui-btn layui-btn-normal addTopMenu">添加顶级节点</a>
        </div>
    </form>
</blockquote>
<!--列表-->
<form class="layui-form">
    <table cellspacing="0" cellpadding="0" border="0" class="layui-table">
        <thead>
            <tr>
                <th>
                    <div class="layui-table-cell "><span>节点名称</span></div>
                </th>
                <th>
                    <div class="layui-table-cell "><span>节点URL</span></div>
                </th>
                <th>
                    <div class="layui-table-cell "><span>备注</span></div>
                </th>
                <th>
                    <div class="layui-table-cell "><span>排序</span></div>
                </th>
                <th>
                    <div class="layui-table-cell "><span>操作</span></div>
                </th>
            </tr>
        </thead>
        <tbody>
        {if condition="$menulist['msg']"}
            <tr class="td_center"><td colspan="5">{$menulist['msg']}</td></tr>
        {/if}
        {volist name="menulist.list" id="v1"}
            <tr class="nodelist depth_{$v1['depth']}" data-depth="{$v1['depth']}" data-id="{$v1['id']}">
                <td class="td_left">
                    <div class="layui-table-cell ">{$v1['menuname']}</div>
                </td>
                <td class="td_left">
                    <div class="layui-table-cell ">{$v1['menuurl']}</div>
                </td>
                <td class="td_left">
                    <div class="layui-table-cell ">{$v1['remark']}</div>
                </td>
                <td class="td_left">
                    <div class="layui-table-cell ">{$v1['sort']}</div>
                </td>
                <td class="td_center">
                    <a href="javascript:;" class="addNode layui-btn layui-btn-primary layui-btn-xs">添加菜单</a>&nbsp;&nbsp;
                    <a href="javascript:;" class="editNode layui-btn layui-btn-xs">修改</a>&nbsp;&nbsp;
                    <a href="javascript:;" class="delNode layui-btn layui-btn-danger layui-btn-xs">删除</a>
                </td>
            </tr>
            {volist name="v1.children" id="v2"}
                <tr style="display:none" class="nodelist nodelist_{$v1['id']} depth_{$v2['depth']}" data-depth="{$v2['depth']}" data-id="{$v2['id']}">
                    <td class="td_left">
                        <div class="layui-table-cell" style="color:#1E9FFF">|-- {$v2['menuname']}</div>
                    </td>
                    <td class="td_left">
                        <div class="layui-table-cell ">{$v2['menuurl']}</div>
                    </td>
                    <td class="td_left">
                        <div class="layui-table-cell ">{$v2['remark']}</div>
                    </td>
                    <td class="td_left">
                        <div class="layui-table-cell ">{$v2['sort']}</div>
                    </td>
                    <td class="td_center">
                        <a href="javascript:;" class="addNode layui-btn layui-btn-primary layui-btn-xs">添加节点</a>&nbsp;&nbsp;
                        <a href="javascript:;" class="editNode layui-btn layui-btn-xs">修改</a>&nbsp;&nbsp;
                        <a href="javascript:;" class="delNode layui-btn layui-btn-danger layui-btn-xs">删除</a>
                    </td>
                </tr>
                {volist name="v2.children" id="v3"}
                    <tr style="display:none" class="nodelist nodelist_{$v1['id']} nodelist_{$v2['id']} depth_{$v3['depth']}" data-depth="{$v3['depth']}" data-id="{$v3['id']}">
                        <td class="td_left">
                            <div class="layui-table-cell" style="color:#009688">|-- |-- {$v3['menuname']}</div>
                        </td>
                        <td class="td_left">
                            <div class="layui-table-cell ">{$v3['menuurl']}</div>
                        </td>
                        <td class="td_left">
                            <div class="layui-table-cell ">{$v3['remark']}</div>
                        </td>
                        <td class="td_left">
                            <div class="layui-table-cell ">{$v3['sort']}</div>
                        </td>
                        <td class="td_center">
                            <a href="javascript:;" class="addNode layui-btn layui-btn-primary layui-btn-xs">添加节点</a>&nbsp;&nbsp;
                            <a href="javascript:;" class="editNode layui-btn layui-btn-xs">修改</a>&nbsp;&nbsp;
                            <a href="javascript:;" class="delNode layui-btn layui-btn-danger layui-btn-xs">删除</a>
                        </td>
                    </tr>
                    {volist name="v3.children" id="v4"}
                        <tr style="display:none" class="nodelist nodelist_{$v1['id']} nodelist_{$v2['id']} nodelist_{$v3['id']} depth_{$v4['depth']}" data-depth="{$v4['depth']}" data-id="{$v4['id']}">
                            <td class="td_left">
                                <div class="layui-table-cell" style="color:#FF5722">|-- |-- |-- {$v4['menuname']}</div>
                            </td>
                            <td class="td_left">
                                <div class="layui-table-cell ">{$v4['menuurl']}</div>
                            </td>
                            <td class="td_left">
                                <div class="layui-table-cell ">{$v4['remark']}</div>
                            </td>
                            <td class="td_left">
                                <div class="layui-table-cell ">{$v4['sort']}</div>
                            </td>
                            <td class="td_center">
                                <a href="javascript:;" class="editNode layui-btn layui-btn-xs">修改</a>&nbsp;&nbsp;
                                <a href="javascript:;" class="delNode layui-btn layui-btn-danger layui-btn-xs">删除</a>
                            </td>
                        </tr>
                    {/volist}
                {/volist}
            {/volist}
        {/volist}
        </tbody>
    </table>
</form>
<!--列表E-->

{/block}

{block name="script"}
<script>
layui.use(['layer','form'], function(){
    var layer = layui.layer;
    var form = layui.form;
    var plat = "{$plat}";
    //条件选择
    form.on("submit(reload)",function(fromdata){
        var gk = '';
        $.each(fromdata.field,function(k,v){
            if( v ) gk += k+'='+v+'&';
        });
        window.location.href = '/sys/menu/index?'+gk;
    });
    //显示隐藏子节点
    $('.nodelist .td_left').click(function(){
        var nodeId = $(this).parents('.nodelist').data('id');
        var depth = $(this).parents('.nodelist').data('depth')+1;
        var showSubNode = $('.nodelist_'+nodeId+'.depth_'+depth);
        var hideSubNode = $('.nodelist_'+nodeId);
        if(showSubNode.is(':visible') == true){
            hideSubNode.hide();
        }else{
            showSubNode.show();
        }
    });
    //添加节点
    $(document).delegate('.addNode','click',function(){
        var This = $(this);
        var id = $(this).parents('.nodelist').data('id');
        var index = layer.open({
            title : false,
            type : 2,
            content : ['/sys/menu/addmenu/pid/'+id+'/plat/'+plat],
            end:function(){
                location.reload();
            }
        })
        layer.full(index);
    });
    $('.addTopMenu').click(function(){
        var index = layer.open({
            title : false,
            type : 2,
            content : ['/sys/menu/addmenu/pid/0/plat/'+plat],
            end:function(){
                location.reload();
            }
        })
        layer.full(index);
    });
    //修改节点
    $(document).delegate('.editNode','click',function(){
        var This = $(this);
        var id = $(this).parents('.nodelist').data('id');
        var index = layer.open({
            title : false,
            type : 2,
            content : ['/sys/menu/editmenu/id/'+id+'/plat/'+plat],
            end:function(){
                location.reload();
            }
        });
        layer.full(index);
    });
    //删除节点
    $(document).delegate('.delNode','click',function(){
        var This = $(this);
        layer.confirm('您确定要删除当前节点？',function(){
            var id = This.parents('.nodelist').data('id');
            $.post('/sys/menu/delmenu',{'id':id},function(data){
                layer.msg(data.msg);
                if(data.code==1) This.parents('.nodelist').remove();
            },'json');
        });
    });
});

</script>
{/block}